<template>
	<h1>这是一个测试功能的页面。</h1>
	<component :is="showWidget(item.type)" class="test" v-for="item in inputs" :key="item.name" :struc="item"  />

	<button @click="onClickRowButton($event)">查看值</button>
	<button @click="submit($event)">模拟提交</button>
	<!-- <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" class="num-btn-small"></el-input-number>
	<el-input v-model="input" class="mini-btn"></el-input> -->
	<h2>牙齿</h2>
	<div class="tooth-data" @click="showTooth('special')">
		<div class="tooth-data-left-top">
			{{leftTop}}
		</div>
		<div class="tooth-data-right-top">{{rightTop}}</div>
		<div class="tooth-data-left-bottom">{{leftBottom}}</div>
		<div class="tooth-data-right-bottom">{{rightBottom}}</div>
	</div>
	<!-- 特殊 -->
	<div class="tooth" v-if="isToothShow">
		<header class="tooth-head">
			<div class="btns">
				<el-button class="btn-5" :class="{active: isTooth}" @click="permanentTooth">恒牙</el-button>
				<el-button class="btn-5" :class="{active: !isTooth}" @click="toothSwitch">乳牙</el-button>
				<el-button class="btn-5" v-if="isActive" @click="reset">重置</el-button>
				<el-button class="btn-5" v-else @click="allClick">全选</el-button>
			</div>
			<div class="close" @click="close('special')">
				<!-- <el-icon><close /></el-icon> -->
			</div>
		</header>
		<div class="content">
			<template v-if="isTooth">
				<div class="tooth-size tooth-left-top">
					<div class="tooth-1 " v-for="(item) in permanentToothList" :key="item.id" @click="handleItem(item, 'left-top')" :class="{'tooth-active': item.active || isActivePermanent}">
						<img class="img-size" src="../assets/image/Tooth_18_Facial.png" alt="">
						<span class="img-btn">{{item.id}}</span>
					</div>
				</div>
				<div class="tooth-size tooth-right-top">
					<div class="tooth-1 " v-for="(item) in CopyPermanentRight" :key="item.id" @click="handleItem(item, 'right-top')" :class="{'tooth-active': item.active || isActivePermanent}">
						<img class="img-size" src="../assets/image/Tooth_18_Facial.png" alt="">
						<span class="img-btn">{{item.id}}</span>
					</div>
				</div>
				<div class="tooth-size tooth-left-bottom">
					<div class="tooth-1 " v-for="(item) in CopyPermanentLeft" :key="item.id" @click="handleItem(item, 'left-bottom')" :class="{'tooth-active': item.active || isActivePermanent}">
						<img class="img-size" src="../assets/image/Tooth_18_Facial.png" alt="">
						<span class="img-btn">{{item.id}}</span>
					</div>
				</div>
				<div class="tooth-size tooth-right-bottom">
					<div class="tooth-1 " v-for="(item) in CopyPermanentRightBottom" :key="item.id" @click="handleItem(item, 'right-bottom')" :class="{'tooth-active': item.active || isActivePermanent}">
						<img class="img-size" src="../assets/image/Tooth_18_Facial.png" alt="">
						<span class="img-btn">{{item.id}}</span>
					</div>
				</div>
			</template>
			<!-- 乳牙 -->
			<template v-else>
				<div class="tooth-size tooth-left-top">
					<div class="tooth-1 " v-for="(item) in deciduousToothList" :key="item.id" @click="handleItem(item, 'left-top')" :class="{'tooth-active': item.active || isActive}">
						<img class="img-size" src="../assets/image/Tooth_18_Facial.png" alt="">
						<span class="img-btn">{{item.id}}</span>
					</div>
				</div>
				<div class="tooth-size tooth-right-top">
					<div class="tooth-1 " v-for="(item) in CopyDeciduousRight" :key="item.id" @click="handleItem(item, 'right-top')" :class="{'tooth-active': item.active || isActive}">
						<img class="img-size" src="../assets/image/Tooth_18_Facial.png" alt="">
						<span class="img-btn">{{item.id}}</span>
					</div>
					<!-- <img class="img-size" src="../assets/image/Tooth_18_Facial.png" alt="">
					<div>按钮1</div> -->
				</div>
				<div class="tooth-size tooth-left-bottom">
					<div class="tooth-1 " v-for="(item) in CopyDeciduousLeft" :key="item.id" @click="handleItem(item, 'left-bottom')" :class="{'tooth-active': item.active || isActive}">
						<img class="img-size" src="../assets/image/Tooth_18_Facial.png" alt="">
						<span class="img-btn">{{item.id}}</span>
					</div>
					<!-- <img class="img-size" src="../assets/image/Tooth_18_Facial.png" alt="">
					<div>按钮3</div> -->
				</div>
				<div class="tooth-size tooth-right-bottom">
					<div class="tooth-1 " v-for="(item) in CopyDeciduousRightBottom" :key="item.id" @click="handleItem(item, 'right-bottom')" :class="{'tooth-active': item.active || isActive}">
						<img class="img-size" src="../assets/image/Tooth_18_Facial.png" alt="">
						<span class="img-btn">{{item.id}}</span>
					</div>
					<!-- <img class="img-size" src="../assets/image/Tooth_18_Facial.png" alt="">
					<div>按钮4</div> -->
				</div>
			</template>
		</div>
	</div>

	<!-- 普通 -->
	<div class="tooth" v-if="isOrdinaryTooth">
		<header class="tooth-head">
			<div class="btns">
				<el-button class="btn-2" @click="clear">清空</el-button>
				<el-button class="btn-2" @click="fullMilk">全口-乳</el-button>
				<el-button class="btn-2" @click="upperHalfMilk">上半口-乳</el-button>
				<el-button class="btn-2" @click="lowerMilk">下半口-乳</el-button>
				<el-button class="btn-2" style="margin-left: 40px" @click="fullPermanent">全口-恒</el-button>
				<el-button class="btn-2" @click="upperPermanent">上半口-恒</el-button>
				<el-button class="btn-2" @click="lowerPermanent">下半口-恒</el-button>
			</div>
			<div class="close" @click="close('ordinary')">
				<!-- <el-icon><close /></el-icon> -->
			</div>
		</header>
		<div class="content-main">
			<div class="content-ordinary">
				<div class="tooth-size tooth-ordinary-left-top">
					<div class="sum">
							<div class="sum-left">
									<div class="ordinary-btn ordinary-btn-top" 
												v-for="item in deciduousToothList" 
												:class="{'tooth-active': item.active}"
												:key="item.id"
												@click="handleItem(item, 'left-top')"
												>{{item.id}}</div>
							</div>
							<div class="sum-right">
								<div class="ordinary-btn ordinary-btn-bottom" 
											v-for="item in permanentToothList" 
											:class="{'tooth-active': item.active}"
											:key="item.id"
											@click="handleItem(item, 'left-top')"
											>{{item.id}}</div>
							</div>
					</div>
				</div>
				<div class="tooth-size tooth-ordinary-right-top">
					<div class="sum">
							<div class="sum-left">
									<div class="ordinary-btn ordinary-btn-top" 
											v-for="item in CopyDeciduousRight" 
											:class="{'tooth-active': item.active}"
											:key="item.id"
											@click="handleItem(item, 'right-top')"
											>{{item.id}}</div>
							</div>
							<div class="sum-right">
								<div class="ordinary-btn ordinary-btn-bottom" 
											v-for="item in CopyPermanentRight" 
											:class="{'tooth-active': item.active}"
											:key="item.id"
											@click="handleItem(item, 'right-top')"
											>{{item.id}}</div>
							</div>
					</div>
				</div>
				<div class="tooth-size tooth-ordinary-left-bottom">
					<div class="sum">
							<div class="sum-left">
									<div class="ordinary-btn ordinary-btn-top" 
											v-for="item in CopyPermanentLeft" 
											:class="{'tooth-active': item.active}"
											:key="item.id"
											@click="handleItem(item, 'left-bottom')"
											>{{item.id}}</div>
							</div>
							<div class="sum-right">
								<div class="ordinary-btn ordinary-btn-bottom" 
										v-for="item in CopyDeciduousLeft" 
										:class="{'tooth-active': item.active}"
										:key="item.id"
										@click="handleItem(item, 'left-bottom')"
										>{{item.id}}</div>
							</div>
					</div>
				</div>
				<div class="tooth-size tooth-ordinary-right-bottom">
					<div class="sum">
							<div class="sum-left">
									<div class="ordinary-btn ordinary-btn-top" 
												v-for="item in CopyPermanentRightBottom" 
												:class="{'tooth-active': item.active}"
												:key="item.id"
												@click="handleItem(item, 'right-bottom')"
												>
												{{item.id}}
									</div>
							</div>
							<div class="sum-right">
								<div class="ordinary-btn ordinary-btn-bottom" 
										v-for="item in CopyDeciduousRightBottom" 
										:class="{'tooth-active': item.active}"
										:key="item.id"
										@click="handleItem(item, 'right-bottom')"
										>
										{{item.id}}
										</div>
							</div>
					</div>
				</div>
			</div>
			<div class="content-right">
				<div class="content-right-main">
						<div class="main-top">
							<div class="main-top-title">暂时选择牙位</div>
							<div class="main-top-ctx">
								<div class="top">
									<div class="btns">La</div>
									<div class="btns">B</div>
									<div class="btns">F</div>
								</div>
								<div class="maddle">
									<div class="btns">M</div>
									<div class="btns">O/I</div>
									<div class="btns">D</div>
								</div>
								<div class="bottom">
									<div class="btns">L</div>
									<div class="btns">P</div>
								</div>
							</div>
						</div>
						<div class="main-bottom">
							<div class="main-bottom-name">多生牙:</div>
							<div class="main-btn left-btn">I</div>
							<div class="main-btn right-btn">I</div>
						</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
import { defineComponent, onUnmounted ,reactive,ref} from "vue";
import useRequet, { RespData } from "../hook/network";
import useShowWidget from "../components/widget/usechoose";
import useDataCheck, { DataStruc } from "../hook/datastruc";
// import useLoginTiggle from "../hook/use-login";

export default defineComponent({
	name: "Test",
	setup: () => {
		let input = ref('')
		const showWidget = useShowWidget;
		const dataCheck = useDataCheck();
		const request = useRequet({ path: "system/config/" });
		// const inputs: Array<DataStruc> = reactive([])
		const inputs: Array<DataStruc> = [];
		const isActive = ref(false)
		const isActivePermanent = ref(false)
		const isTooth = ref(true)
		const isToothShow = ref(false)
		const isOrdinaryTooth = ref(false)
		// const activeIndex = ref(-1)
		// const deciduous = ref('')
		const leftTop = ref('')
		const rightTop = ref('')
		const leftBottom = ref('')
		const rightBottom = ref('')

		type ToothType = {
			id: string | number,
			url?: string,
			active: boolean
		}

		// 数字
		const permanentToothList:ToothType[] = reactive([
			{
				id: 1,
				url: '../assets/image/Tooth_18_Facial.png',
				active: false,
			},
			{
				id: 2,
				url: '../assets/image/Tooth_18_Facial.png',
				active: false,
			},
			{
				id: 3,
				url: '../assets/image/Tooth_18_Facial.png',
				active: false,
			},
			{
				id: 4,
				url: '../assets/image/Tooth_18_Facial.png',
				active: false,
			},
			{
				id: 5,
				url: '../assets/image/Tooth_18_Facial.png',
				active: false,
			},
			{
				id: 6,
				url: '../assets/image/Tooth_18_Facial.png',
				active: false,
			},
			{
				id: 7,
				url: '../assets/image/Tooth_18_Facial.png',
				active: false,
			},
			{
				id: 8,
				url: '../assets/image/Tooth_18_Facial.png',
				active: false,
			},
		])
		console.log(permanentToothList.reverse())
		
		const CopyPermanentRight:ToothType[] = JSON.parse(JSON.stringify(permanentToothList));
		console.log(CopyPermanentRight.reverse())

		const CopyPermanentRightBottom:ToothType[] = JSON.parse(JSON.stringify(permanentToothList));
		console.log(CopyPermanentRightBottom.reverse())

		const CopyPermanentLeft:ToothType[] = JSON.parse(JSON.stringify(permanentToothList));


		// 字母4 份数据
		const deciduousToothList:ToothType[] = reactive([
			{
				id: 'A',
				url: '../assets/image/Tooth_18_Facial.png',
				active: false,
			},
			{
				id: 'B',
				url: '../assets/image/Tooth_18_Facial.png',
				active: false,
			},
			{
				id: 'C',
				url: '../assets/image/Tooth_18_Facial.png',
				active: false,
			},
			{
				id: 'D',
				url: '../assets/image/Tooth_18_Facial.png',
				active: false,
			},
			{
				id: 'E',
				url: '../assets/image/Tooth_18_Facial.png',
				active: false,
			},
		])
		console.log(deciduousToothList.reverse())

		const CopyDeciduousRight:ToothType[] = JSON.parse(JSON.stringify(deciduousToothList));
		console.log(CopyDeciduousRight.reverse())

		const CopyDeciduousRightBottom:ToothType[] = JSON.parse(JSON.stringify(deciduousToothList));
		console.log(CopyDeciduousRightBottom.reverse())

		const CopyDeciduousLeft:ToothType[] = JSON.parse(JSON.stringify(deciduousToothList));

		onUnmounted(() => {
			dataCheck.clearDataCheck();
		});
		// 无图点击
		const handleItem = (item:ToothType, position?: string) => {
			console.log(item)
			
			switch (position) {
				case 'left-top':
					item.active = !item.active
					if(item.active) {
						leftTop.value += item.id
					} else {
						leftTop.value = leftTop.value.replace(item.id as string, '')
					}
					leftTop.value = leftTop.value.split('').sort().join('')
					break;
				case 'right-top':
					item.active = !item.active
					if(item.active) {
						rightTop.value += item.id
					} else {
						rightTop.value = rightTop.value.replace(item.id as string, '')
					}
					rightTop.value = rightTop.value.split('').sort().join('')
					break;
				case 'left-bottom':
					item.active = !item.active
					if(item.active) {
						leftBottom.value += item.id
					} else {
						leftBottom.value = leftBottom.value.replace(item.id as string, '')
					}
					leftBottom.value = leftBottom.value.split('').sort().join('')
					break;
				case 'right-bottom':
					item.active = !item.active
					if(item.active) {
						rightBottom.value += item.id
					} else {
						rightBottom.value = rightBottom.value.replace(item.id as string, '')
					}
					rightBottom.value = rightBottom.value.split('').sort().join('')
					break;
				default:
					break;
			}
			
			
			// console.log(leftTop.value)
			// console.log(leftTop.value.split('').sort().join(''))
			// console.log(permanentToothList)
		}

		// 有图点击
		// const handleImage = (item:ToothType) => {

		// }
		/***
		 * 首先 1. ABCDEF
		 * 数字 2. 12345678
		 * 
		 */
		const handleDeciduousItem = (item:ToothType) => {
			console.log('点击了乳口')
			item.active = !item.active
			if(item.active) {
				leftTop.value += item.id
			} else {
				leftTop.value = leftTop.value.replace(item.id as string, '')
			}
			leftTop.value = leftTop.value.split('').sort().join('')
		}
		const allClick = () => {
			console.log('点击了全选')
			isActive.value = true
			// if(isTooth.value) {
			// 	console.log('真')
			// 	isActivePermanent.value = true
			// 	isActive.value = true
				
			// } else {
			// 	isActivePermanent.value = false
			// 	isActive.value = true
				
			// }
			

		}
		const reset = () => {
			isActive.value = false
			isActivePermanent.value = false
			leftTop.value = ''
			rightTop.value = ''
			leftBottom.value = ''
			rightBottom.value = ''

			permanentToothList.forEach(item => item.active = false)
			CopyPermanentRight.forEach(item => item.active = false)
			CopyPermanentRightBottom.forEach(item => item.active = false)
			CopyPermanentLeft.forEach(item => item.active = false)

			deciduousToothList.forEach(item => item.active = false)
			CopyDeciduousRight.forEach(item => item.active = false)
			CopyDeciduousRightBottom.forEach(item => item.active = false)
			CopyDeciduousLeft.forEach(item => item.active = false)
		}
		const permanentTooth = () => {
			isTooth.value = true
		}
		const toothSwitch = () => {
			isTooth.value = false
		}
		const close = (type: string) => {
			if(type === 'ordinary') {
				isOrdinaryTooth.value = false
				return
			}
			if(type === 'special') {
				isToothShow.value = false
				return
			}
		}
		const showTooth = (type: string) => {
			if(type === 'ordinary') {
				isOrdinaryTooth.value = true
				return
			}
			if(type === 'special') {
				isToothShow.value = true
				return
			}
		}

		// 无图tooth
		// 清空
		const clear = () => {
			leftTop.value = ''
			rightTop.value = ''
			leftBottom.value = ''
			rightBottom.value = ''

			permanentToothList.forEach(item => item.active = false)
			CopyPermanentRight.forEach(item => item.active = false)
			CopyPermanentRightBottom.forEach(item => item.active = false)
			CopyPermanentLeft.forEach(item => item.active = false)

			deciduousToothList.forEach(item => item.active = false)
			CopyDeciduousRight.forEach(item => item.active = false)
			CopyDeciduousRightBottom.forEach(item => item.active = false)
			CopyDeciduousLeft.forEach(item => item.active = false)
		}
		// 全口-乳
		const fullMilk = () => {
			leftTop.value = ''
			rightTop.value = ''
			leftBottom.value = ''
			rightBottom.value = ''

			deciduousToothList.forEach(item => { item.active = true })
			CopyDeciduousRight.forEach(item => { item.active = true })
			CopyDeciduousRightBottom.forEach(item => { item.active = true })
			CopyDeciduousLeft.forEach(item => { item.active = true })
			ww()
		}

		const ww = () => {
			permanentToothList.forEach(item => {
				if(item.active) {
						leftTop.value += item.id
				} else {
					return
				}
			})
			CopyPermanentRight.forEach(item => {
				if(item.active) {
						rightTop.value += item.id
				} else {
					return
				}
			})
			CopyPermanentRightBottom.forEach(item => {
				if(item.active) {
						leftBottom.value += item.id
				} else {
					return
				}
			})
			CopyPermanentLeft.forEach(item => {
				if(item.active) {
						rightBottom.value += item.id
				} else {
					return
				}
			})

			deciduousToothList.forEach(item => {
				if(item.active) {
						leftTop.value += item.id
				} else {
					return
				}
			})
			CopyDeciduousRight.forEach(item => {
				if(item.active) {
						rightTop.value += item.id
				} else {
					return
				}
			})
			CopyDeciduousRightBottom.forEach(item => {
				if(item.active) {
						leftBottom.value += item.id
				} else {
					return
				}
			})
			CopyDeciduousLeft.forEach(item => {
				if(item.active) {
						rightBottom.value += item.id
				} else {
					return
				}
			})
		}

		// 上半口-乳
		const upperHalfMilk = () => {
			leftTop.value = ''
			rightTop.value = ''
			leftBottom.value = ''
			rightBottom.value = ''

			deciduousToothList.forEach(item => { item.active = true })
			CopyDeciduousRight.forEach(item => { item.active = true })
			ww()
		}
		// 下半口-乳
		const lowerMilk = () => {
			leftTop.value = ''
			rightTop.value = ''
			leftBottom.value = ''
			rightBottom.value = ''

			CopyDeciduousRightBottom.forEach(item => { item.active = true })
			CopyDeciduousLeft.forEach(item => { item.active = true })
			ww()
		}
		// 全口-恒
		const fullPermanent = () => {
			leftTop.value = ''
			rightTop.value = ''
			leftBottom.value = ''
			rightBottom.value = ''

			permanentToothList.forEach(item => { item.active = true })
			CopyPermanentRight.forEach(item => { item.active = true })
			CopyPermanentRightBottom.forEach(item => { item.active = true })
			CopyPermanentLeft.forEach(item => { item.active = true })
			ww()
		}
		// 上半口-恒
		const upperPermanent = () => {
			leftTop.value = ''
			rightTop.value = ''
			leftBottom.value = ''
			rightBottom.value = ''

			permanentToothList.forEach(item => item.active = true)
			CopyPermanentRight.forEach(item => item.active = true)
			ww()
		}

		// 下半口-恒
		const lowerPermanent = () => {
			leftTop.value = ''
			rightTop.value = ''
			leftBottom.value = ''
			rightBottom.value = ''

			CopyPermanentRightBottom.forEach(item => item.active = true)
			CopyPermanentLeft.forEach(item => item.active = true)
			ww()
		}



		return { 
				inputs, 
				request, 
				dataCheck, 
				showWidget, 
				input , 
				permanentToothList,
				CopyPermanentRight,
				CopyPermanentRightBottom,
				CopyPermanentLeft,

				deciduousToothList,
				CopyDeciduousRight,
				CopyDeciduousRightBottom,
				CopyDeciduousLeft,

				handleItem, 
				isActive, 
				isActivePermanent,
				// activeIndex,
				// deciduous,
				allClick, 
				reset,
				isTooth,
				permanentTooth,
				toothSwitch,
				handleDeciduousItem,
				leftTop,
				rightTop,
				leftBottom,
				rightBottom,
				close,
				isToothShow,
				isOrdinaryTooth,
				showTooth,

				clear,
				fullMilk,
				upperHalfMilk,
				lowerMilk,
				fullPermanent,
				upperPermanent,
				lowerPermanent
				};
	},
	mounted() {
		console.log(1)
		// this.submit()
	},
	methods: {
		onClickRowButton(event: MouseEvent) {
			// this.isLogin.setLoggin(false);
		},

		submit(event: MouseEvent) {
			if (!this.dataCheck.checkAll()) {
				console.error("检验文件出现异常。");
				return;
			}

			const paras = [];

			for (let item of this.inputs) {
				let one = {
					name: item.name,
					value: item.value,
				};
				if (one.value && one.value !== "") paras.push(one);
			}

			this.request.sendRequest({
				address: "getConfig",
				// params: paras,
				params: {
					"groupId":501
				},
				success: (resp: RespData) => {
					console.log(resp, '1111')
					this.inputs = resp.data
					console.log(this.inputs)
					console.debug("成功");
				},
				fail: (resp: RespData) => {
					console.log(resp, '1234')
					console.debug("失败");
				},
				method: "POST",
			});


		},
	},
});
</script>

<style lang="scss" scoped>
.test {
	// width: 400px;
	display: flex;
	flex-wrap: wrap;
	// justify-content: space-between;
}

.tooth {
	width: 800px;
	height: 300px;
	box-shadow: 0 0 1px #000;
	background: white;
	box-sizing: border-box;
	.tooth-head {
		height: 45px;
		line-height: 45px;
		display: flex;
		justify-content: space-between;
		.btns {
			padding-left: 20px;
		}
		.close {
			padding-right: 20px;
			cursor: pointer;
		}
	}
	.content {
		background: #ccc;
		width: 100%;
		height: calc(100% - 45px);
		display: flex;
		flex-wrap: wrap;
		.tooth-size {
			width: 50%;
			height: 50%;
			box-sizing: border-box;
		}
		.tooth-left-top {
			border-right: 1px solid white;
			border-bottom: 1px solid white;
			display: flex;
			// justify-content: space-around;
			align-content: center;
			box-sizing: border-box;
			.tooth-1 {
				// padding: 5px;
				flex: 1;
				text-align: center;
			}
			.tooth-1:hover {
				border: 1px solid $mainColor;
				box-sizing: border-box;
			}
		}
		.tooth-left-bottom {
			border-right: 1px solid white;
			box-sizing: border-box;
			display: flex;
			.tooth-1 {
				// padding: 5px;
				flex: 1;
				text-align: center;
			}
			.tooth-1:hover {
				border: 1px solid $mainColor;
				box-sizing: border-box;
			}
		}
		.tooth-right-top {
			border-bottom: 1px solid white;
			box-sizing: border-box;
			display: flex;
			.tooth-1 {
				// padding: 5px;
				flex: 1;
				text-align: center;
			}
			.tooth-1:hover {
				border: 1px solid $mainColor;
				box-sizing: border-box;
			}
		}
		.tooth-right-bottom {
			display: flex;
			.tooth-1 {
				// padding: 5px;
				flex: 1;
				text-align: center;
			}
			.tooth-1:hover {
				border: 1px solid $mainColor;
				box-sizing: border-box;
			}
		}
		.img-size {
				padding-top: 8px;
				width: 35px;
				height: 80px;
				display: inline-block;
			}
		.img-btn {
			text-align: center;
			// box-sizing: border-box;
			border: 1px solid #ccc;
			background: white;
			width: 35px;
			border-radius: 4px;
			cursor: pointer;
			display: block;
			margin-left: 5px;
		}
	}

	.content-main {
		background: white;
		width: 100%;
		height: calc(100% - 45px);
		display: flex;
		
		.content-ordinary {
			flex: 6;
			display: flex;
			flex-wrap: wrap;
			.tooth-size {
				width: 50%;
				height: 50%;
				box-sizing: border-box;
			}
			.tooth-ordinary-left-top {
				border-right: 1px solid #9397a2;
				border-bottom: 1px solid #9397a2;
				display: flex;
				
				.sum {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					.sum-left {
						padding-left: 90px;
						margin: 20px;
						display: flex;
						justify-content: space-around;
						box-sizing: border-box;
					}
					.sum-right {
						display: flex;
						justify-content: space-around;
						margin: 20px;
						margin-top: 0;
					}
				}
				.ordinary-btn-top {
					// display: flex;
					// justify-content: space-around;
				}
				.ordinary-btn-bottom {

				}
			}
			.tooth-ordinary-left-bottom {
				border-right: 1px solid #9397a2;
				box-sizing: border-box;
				// background: red;
				.sum {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					.sum-left {
						
						margin: 20px;
						display: flex;
						justify-content: space-around;
						box-sizing: border-box;
					}
					.sum-right {
						padding-left: 90px;
						display: flex;
						justify-content: space-around;
						margin: 20px;
						margin-top: 0;
					}
				}
			}
			.tooth-ordinary-right-top {
				// background: red;
				border-bottom: 1px solid #9397a2;
				box-sizing: border-box;
				.sum {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					.sum-left {
						padding-right: 90px;
						margin: 20px;
						display: flex;
						justify-content: space-around;
						box-sizing: border-box;
					}
					.sum-right {
						display: flex;
						justify-content: space-around;
						margin: 20px;
						margin-top: 0;
					}
				}
			}
			.tooth-ordinary-right-bottom {
				.sum {
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					.sum-left {
						
						margin: 20px;
						display: flex;
						justify-content: space-around;
						box-sizing: border-box;
					}
					.sum-right {
						display: flex;
						justify-content: space-around;
						margin: 20px;
						margin-top: 0;
						padding-right: 90px;
					}
				}
			}
		}
		.content-right {
			// width: 40%;
			flex: 2;
			// background: red;
			.content-right-main {
				width: 150px;
				height: 200px;
				// background: blue;
				margin-top: 30px;
				display: flex;
				flex-direction: column;
				.main-top {
					flex: 4;
					background: #e6e6e6;
					.main-top-title {
						text-align: center;
						height: 30px;
						line-height: 30px;
						box-sizing: border-box;
						border-bottom: 1px solid #d8d8d8;
						font-size: 12px;
						color: #666a73;
					}
					.main-top-ctx {
						.btns {
							width: 30px;
							height: 30px;
							text-align: center;
							line-height: 30px;
							// border: 1px solid #000;
							box-sizing: border-box;
							background: white;
							font-size: 12px;
						}
						.btns:hover {
							background: $a1-Color;
						}
						.top {
							display: flex;
							padding: 10px 10px 0 10px;
							justify-content: space-evenly;
							box-sizing: border-box;
						}
						.maddle {
							display: flex;
							padding: 10px 10px 0 10px;
							justify-content: space-evenly;
							box-sizing: border-box;
						}
						.bottom {
							display: flex;
							padding: 10px 10px 0 10px;
							justify-content: space-evenly;
							box-sizing: border-box;
						}
					}
				}
				.main-bottom {
					flex: 1;
					display: flex;
					justify-content: space-around;
					align-content: center;
					padding-top: 6px;
					.main-bottom-name {
						line-height: 2;
						font-size: 14px;
						color: #575D6A;
					}
					.main-btn {
						width: 30px;
						height: 30px;
						line-height: 30px;
						text-align: center;
						box-sizing: border-box;
						border: 1px solid #e9edf1;;
						font-size: 12px;
					}
					.left-btn {
						position: relative;
					}
					.left-btn:hover {
						background: $a1-Color;
					}
					.left-btn::before {
						position: absolute;
						content: 's';
						top: -10px;
						left: 4px;
					}

					.right-btn {
						position: relative;
					}
					.right-btn:hover {
						background: $a1-Color;
					}
					.right-btn::before {
						position: absolute;
						content: 's';
						top: -10px;
						left: 16px;
					}
					
				}
			}
		}
		.ordinary-btn {
			display: inline-block;
			width: 30px;
			height: 30px;
			border: 1px solid #e9edf1;;
			box-sizing: border-box;
			text-align: center;
			line-height: 30px;
			color: #575d6a;
			
		}
		.ordinary-btn:hover {
			// color: white;
			background: $a1-Color;
		}
	}
}



// 牙齿数据
.tooth-data {
	// width: 120px;
	height: 60px;
	background: red;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	.tooth-data-left-top {
		border-right: 1px solid #000;
		border-bottom: 1px solid #000;
		box-sizing: border-box;
		width: 50%;
		height: 50%;
		text-align: right;
		// unicode-bidi: bidi-override;
		// direction: rtl;
	}
	.tooth-data-right-top {
		border-bottom: 1px solid #000;
		box-sizing: border-box;
		width: 50%;
		height: 50%;
		text-align: left;
	}
	.tooth-data-right-bottom {
		
		box-sizing: border-box;
		width: 50%;
		height: 50%;
		text-align: left;
		
	}
	.tooth-data-left-bottom {
		width: 50%;
		height: 50%;
		text-align: right;
		border-right: 1px solid #000;
		box-sizing: border-box;
		// unicode-bidi: bidi-override;
		// direction: rtl;
	}
}


.tooth-active {
	background: $mainColor;
	// color: white;
}
.active {
	background: $mainColor;
	color: white;
} 
</style>
